import { OnInit, Component } from '@angular/core'
import { DataService } from '@shared/services/data.service'
import { ListBaseClass } from '@shared/classes/ListBaseClass'
import { ITrade, ITradeQueryParams } from '@shared/interfaces/trade'
import { NzMessageService } from 'ng-zorro-antd'
import { I18NService } from '@core'
import { Router, ActivatedRoute } from '@angular/router'
import { SettingsService } from '@delon/theme'
import { STColumn, STColumnBadge, STData } from '@delon/abc'
import { Observable } from 'rxjs'
import { CurrencyService } from '@shared/services/currency.service'
import { signAmtNumberOfTrade } from 'app/utils/helpers'

@Component({
  selector: 'app-related-trades',
  templateUrl: './related-trades.component.html',
  styleUrls: ['../../../../shared/styles/table.less'],
})
export class RelatedTradesComponent extends ListBaseClass<ITrade, ITradeQueryParams> implements OnInit {
  math = Math
  columns: STColumn[] = []

  procBadge: STColumnBadge = {
    5: { text: this.trans('TRADE_STATUS.PENDING'), color: 'processing' },
    2: { text: this.trans('TRADE_STATUS.REJECT'), color: 'error' },
    0: { text: this.trans('TRADE_STATUS.RESOLVE'), color: 'success' },
  }

  constructor(
    private dataService: DataService,
    private currencyService: CurrencyService,
    public msg: NzMessageService,
    public i18n: I18NService,
    public router: Router,
    public route: ActivatedRoute,
    public settingService: SettingsService,
  ) {
    super(msg, i18n, route, router, settingService)
  }

  ngOnInit() {
    this.initColumns()
    this.dataService.trade$.value$.subscribe(trade => {
      const relatedTrades = trade.tradesRelated
      this.data = relatedTrades || []
      this.total = this.data.length
    })
  }

  getDecimalByCurrencyCode(currCode: string): Observable<number> {
    return this.currencyService.getDecimalByCode(currCode)
  }

  computeTransAmt(trade: ITrade): number {
    return signAmtNumberOfTrade(trade)
  }

  private goDetail(record: ITrade): void {
    const { orderNum, intStoreCode, category } = record
    this.router.navigateByUrl(`/trades/${orderNum}/${intStoreCode}/${category}`)
  }

  private initColumns(): void {
    this.columns = [
      {
        type: 'link',
        title: '订单号',
        i18n: 'TRADE.ORDER_NUM',
        index: 'orderNum',
        className: 'text-center',
        width: '150px',
        fixed: 'left',
        click: this.goDetail.bind(this),
      },
      {
        title: '交易时间',
        i18n: 'TRADE.TRANS_TIME',
        index: 'createdAt',
        className: 'text-center',
        type: 'date',
        width: '150px',
        dateFormat: 'YYYY-MM-DD HH:mm',
      },
      {
        title: '交易场景',
        i18n: 'TRADE.TRANS_SCENE',
        className: 'text-center',
        width: '100px',
        render: 'transScene',
      },
      {
        title: '交易金额',
        i18n: 'TRADE.TRANS_AMT',
        className: 'text-center',
        width: '100px',
        render: 'transAmt',
      },
      {
        title: '状态',
        i18n: 'GENERAL.INFO.STATUS',
        index: 'procFlag',
        type: 'badge',
        badge: this.procBadge,
        className: 'text-left',
        width: '100px',
        fixed: 'right',
        format: (item: STData) => {
          // TODO: I18N
          // using property render
          const procFlag = item.procFlag
          return procFlag
        },
      },
    ]
  }
}
